<form class="form-inline">
  <div class="form-group" style="margin-bottom:5px">
    <label class=" control-label">开始日期：</label>
    <div class="input-group date form_datetime">
      <span class="input-group-addon">
        <i class="fa fa-calendar"></i>
      </span>
      <input class="form-control" type="text" style="background: white; cursor: pointer;" [(ngModel)]="postBody.startDateStr" mwlFlatpickr
        [ngModelOptions]="{standalone: false}" name="startDateStr" id="startDateStr">
    </div>
    <label class="control-label">结束日期：</label>
    <div class="input-group date form_datetime">
      <span class="input-group-addon">
        <i class="fa fa-calendar"></i>
      </span>
      <input class="form-control" type="text" style="background: white; cursor: pointer;" [(ngModel)]="postBody.endDateStr" mwlFlatpickr
        [ngModelOptions]="{standalone: false}" name="endDateStr" id="endDateStr">
    </div>

    <label>费用类型：</label>
    <input class="form-control" type="text" placeholder="费用类型" [(ngModel)]="postBody.sCostType" name="sCostType">

    <button type="button" class="btn btn-primary" (click)="loadList()">
      <i class="fa fa-search"></i>查询</button>
    <button type="button" class="btn btn-primary" (click)="export()">
      <i class="fa fa-sign-out"></i>导出Excel</button>

  </div>

</form>
<table id="example2" class="datatable-control-all table table-bordered table-keep-line table-hover table-striped">
  <thead>
    <tr>
      <th class="width-5">
        <div class="checkbox checkbox-primary">
          <input type="checkbox" id="checkboxAll" [(ngModel)]="isCheckedAll" (ngModelChange)="checkedAll()">
          <label></label>
        </div>
      </th>
      <th class="width-19">组合代码</th>
      <th class="width-19">组合名称</th>
      <th class="width-19">日期</th>
      <th class="width-19">费用类型</th>
      <th class="width-19">金额</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of costList" style="text-align: center; vertical-align: middle; ">
      <td>
        <div class="checkbox checkbox-primary">
          <input type="checkbox" [(ngModel)]="item.isChecked" (ngModelChange)="ctrlCheckAll()">
          <label></label>
        </div>
      </td>
      <td class="short_name">{{item.sFundCode}}</td>
      <td class="short_name">{{item.sFundName}}</td>
      <td class="short_name">{{item.tDate}}</td>
      <td class="short_name">{{item.sFeeType}}</td>
      <td class="short_name">{{item.nMoney}}</td>
    </tr>
  </tbody>
</table>
<div class="box-footer clearfix">
  <app-pagination [currentPageNum]="costListPageInfo.currentPageNum" [pagesShow]="" [totalPages]="costListPageInfo.totalPages"
    (pageChanged)="costPageNavigation($event)">
    <div class="pull-left pagination-detail" data-pagination-additional="true">
      <span class="pagination-info">
        当前显示第{{costListPageInfo.startRow}}到第{{costListPageInfo.endRow}}条，总共{{costListPageInfo.total}}条，
      </span>
      <span class="page-list">
        每页记录
        <span class="btn-group dropup">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="page-size">{{costListPageInfo.pageSize}}</span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li *ngFor="let i of costListPageInfo.pageList" role="menuitem" [class.active]="costListPageInfo.pageSize === i" (click)="costpageSizeChange(i)">
              <a>{{i}}</a>
            </li>
          </ul>
        </span>条
      </span>
    </div>
  </app-pagination>
</div>